<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS常用选择器的介绍</title>
<style type="text/css">
/*
p{color:red; font-size:12px; background-color:green;}			①【元素选择器】
div{color:blue; background-color:black; font-size:20px;}			直接用元素作为选择器(注意：背景色不是bgcolor：green)
*/

.one{font-size:20px; font-weight:bold;}							/*②【类选择器】		E.类名		注意：其中E必须代表有效的HTML元素或为空，记得有个“.”的符号）*/
div.two{color:red; background-color:yellow;}						/*选择器功能的叠加，在claas内用空格隔开即可*/

#XXX{font-size:50px; text-decoration:underline;}	/*下划线*/	/*③【ID选择器】			E#类名		注意：其中E必须代表有效的HTML元素或为空，记得有个“#”的符号）*/
#YYY{color:#9F9; background-color:#F00;}									/*ID 选择器和类选择器最大的区别在于，ID选择器功能不能够叠加，具有唯一性*/
div#ZZZ{border:5px dotted black;}		/*边框为：5px黑色虚线边框*/

/*h1,div.one,#XXX{color:red; font-size:25px;}				[一]选择器的组合，用“,”相互隔开，将具有相同样式规则的选择器组合，从而节约代码量*/

h2 b{color:red; font-size:40px;}								/*[二]选择器的嵌套，用空格相互隔开，用来表示选择器与选择器之间的样式规则*/
</style>
</head>

<body>
	<h1 align="center">一、元素选择器</h1>
	<p>这是元素选择器1</p>
    <div>这是元素选择器2</div>
 	<hr /><hr />
    
    <h1 align="center">二、类选择器</h1>
    <p>这是类选择器A</p>
    <p class="one">这是类选择器B</p>
    <p class="two">这是类选择器C</p>
    <div>这是类选择器D</div>
    <div class="one">这是类选择器E</div>
    <div class="two">这是类选择器F</div>
    <div class=" one two">这是类选择器G</div>
    <hr /><hr />
    
    <h1 align="center">三、ID选择器</h1>
    <p id="XXX">这是ID选择器A</p>
    <p id="YYY">这是ID选择器B</p>
    <div>这是布局块</div>
    <div id="XXX YYY">这是ID选择器C</div>				<!--ID 选择器和类选择器最大的区别在于，ID选择器功能不能够叠加，具有唯一性，否则将成为浏览器默认格式-->
    <div id="ZZZ">这是ID选择器D</div>
    <hr /><hr />
    
    <h1 align="center">[一]、选择器的组合</h1>
    <hr /><hr />
    
    <h1 align="center">[二]、选择器的嵌套</h1>
    <h2>这本来是<b>加粗</b>的文字，但是因为选择器嵌套</h2>的关系,<b>现在只有这里的样式才是加粗。</b>

</body>
</html>
